<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>41 - 文件上传</title>
    <style>
        .filebtn {
            display: none;
        }
    </style>
</head>
<body>
    <input type="file" class="filebtn">
    <img src="" alt="">
    <input type="button" value="请选择上传文件" class="btn">

    <script src="./lib/axios.js"></script>
    <script>

        // 文件上传

        // 1. 文件上传向服务端新增数据
        // 2. 文件上传使用 post 请求方式
        // 3. 文件上传数据格式      必须是 FormData 数据格式


        // FormData 内置构造函数
        // 语法:   
        //     let 对象 = new FormData();

        // 通过构造函数方法设置 FormData 数据
        // 语法:   
        //     对象.append('自定义键', 值);


        // 代码演示:
        // let fd = new FormData();
        //     fd.append('uname', '老段');
        // console.log(fd);





        // 文件上传完美写法
        // 文件实现步骤:
        // 1. 准备一个 file 按钮
        // 2. 给按钮注册change事件
        // change事件: 当前标签中的内容发生.那么触发change事件
        // 3. 在change事件中.通过 事件源.files 获取用户选择的上传文件
        let btn = document.querySelector('.filebtn');
            btn.onchange = function () {
                // console.log(this.files);
                
                // 获取用户上传的文件
                let file = this.files[0];
                // 判断一下当前文件的后缀名. 先获取文件名  ====> 然后再判断后缀名
                let fileName = file.name;

                // 获取文件后缀名
                let i = fileName.lastIndexOf('.');
                let last_name = fileName.substring(i);
                console.log(last_name);

                // 判断文件后缀名是否合法
                if (last_name == '.jpg' || last_name == '.webp' || last_name == '.png') {
                    // 将文件上传到服务端 (增加一条数据), 将文件数据保存到FormData中
                    let fd = new FormData();
                    // append是一个键值对
                    fd.append('myfile', file);
                    axios.post('http://www.liulongbin.top:3009/api/upload/avatar', fd).then(function (res) {
                        // 文件上传成功, 一般图片上传成功后,都会将图片在网页中预览
                        console.log(res);
                        let img = document.querySelector('img');
                        img.src = 'http://www.liulongbin.top:3009' + res.data.url;
                    })
                } else {
                    alert('对不起,请上传图片格式的文件')
                }
            };

            // 获取普通按钮
            let btn1 = document.querySelector('.btn');
            btn1.onclick = function () {
                // 让程序帮我们点击file按钮
                btn.click();
            };




    </script>
</body>
</html>